<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--<script type="text/javascript">
			window.onload=function(){
				var ctx=document.getElementById("canvas").getContext('2d');
				ctx.beginPath();//初始化路径或开始路径
				ctx.moveTo(50,50);//第一个点
				ctx.lineTo(350,350);//第二个点
				ctx.lineTo(200,350);//第三个点
				ctx.lineJoin='round';//设置交点
				ctx.strokeStyle="goldenrod";//设置线颜色
				ctx.lineWidth=3;//设置线宽大小
				ctx.closePath();//闭合路径
				ctx.stroke();//划线
			}
		</script>
		<canvas id="canvas" width="500px" height="500px"></canvas>-->
		<input type="color" name="" id="colorSelect" value="" />
<canvas  id="canvas" width="320" height="200" style="border:1px solid #eee;">您的浏览器不支持canvas</canvas>
<script>     
        var selector = document.getElementById("colorSelect");
        selector.onchange = function(){
            var color = this.value;
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var w = canvas.width , h = canvas.height;
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, w, h);
        }
</script>
		
	</body>
</html>
